<template>
	<div id="profile">
		<NavBar class="profile-navbar">
				<div id="" slot="center">
					小蔡商城
				</div>
			</NavBar>
		<UserInfo/>
    
<section class="account">
  <div class="account-item" v-for="(item,index) in account" :key="index">
    <div class="number">
      <span>{{item.num}}</span>{{item.numinfo}}
    </div>
    <div class="account-info">{{item.info}}</div>
  </div>
  
</section>
    
    <ListView :listData="orderList"></ListView>
    <ListView :listData="serviceList"></ListView>
	</div>
</template>

<script>
	import NavBar from "components/common/navbar/NavBar.vue"
	import UserInfo from "./childComps/userInfo.vue"
  import ListView from "./childComps/listView.vue"
  export default {
    name: "Profile",
		components: {
			NavBar,
			UserInfo,
      ListView
		},
    data() {
      return {
        account: [{num:"0.00",numinfo:"元",info:"我的余额"},{num:"0",numinfo:"个",info:"我的优惠"},{num:"0",numinfo:"分",info:"我的积分"}],
        orderList:[
          {icon: 'icon-xiaoxitongzhi', iconColor: '#ff8198', info: '我的消息'},
          {icon: 'icon-shangcheng2', iconColor: '#fc7b53', info: '积分商城'},
          {icon: 'icon-huiyuan', iconColor: '#ffc636', info: '会员卡'},
          ],
          serviceList: [
            {icon: 'icon-gouwuchekong', iconColor: '#ff8198', info: '我的购物车'},
            {icon: 'icon-xiazai', iconColor: '#ff8198', info: '下载购物APP'},
          ]
      }
    },
  }
</script>

<style scoped>
  #profile{
    background-color: #f2f2f2;
  }
.profile-navbar{
	background-color: var(--color-tint);
	    color: #fff;
}
.account{
  display: flex;
}
.account-item{
  font-size: 13px;
  padding: 18px;
  color: #666;
  width: 100%;
  background-color: white;
  margin-right: 1px;
  text-align: center;
}
.number span{
  font-weight: 700;
  color: #ff5f3e;
  font-size: 24px;
}
.account-info{
  margin-top: 10px;
}
</style>
